<template>
  <div class="center">
    <div class="newgood">
      <h3>新品上市</h3>
      <div class="newgoodInit clearfix">
        <div v-for="item in NewGoodList" :key="item.goodId">
          <el-card :body-style="{ padding: '0px'   }" class="card">
            <img :src="item.goodImgUrl" alt="图片丢失了" class="goodImg" />
            <div style="padding: 14px;">
              <span>{{item.goodName}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ subDatetime(item.goodCreateTime) }}</time>
                <div>价格:{{item.goodNowPrice}}</div>
                <el-button type="text" class="button" @click="gotoGoodDetail(item.goodId)">购买</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewGoodInfo } from "../api/requestapi";
export default {
  name: "NewGood",

  data() {
    return {
      NewGoodList: [],
    };
  },

  methods: {
    subDatetime(datetime) {
      var date = datetime;
      return date.substring(0, 10);
    },

    //跳转商品页面
    gotoGoodDetail(goodId) {
      alert(goodId);
      this.$router.push({ path: "/GoodDetail", query: { goodId: goodId } });
    },
  },

  created() {
    getNewGoodInfo().then((response) => {
      this.NewGoodList = response.data;
    });
  },
};
</script>

<style>
.center {
  margin: 0 auto;
}
.card {
  width: 380px;
  height: 300px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}
.newgoodInit {
  width: 1700px;
  margin: 0 auto;
}

.newgood {
  width: 100%;
  margin-bottom: 20px;
}

.goodImg {
  height: 150px;
  width: 380px;
}

/* 清除浮动 在浮动后面加一个元素 让后面的布局可以顶住下面继续编辑*/
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
</style>